<template>
	<view class="change">
		<text class="text-center" >{{from=="en"?"英文":"中文"}}</text>
		<button @click="change" style="height: 30px;width: 50px;margin: 0;">
			<img src="/static/image/切换.png" style="height: 100%; width: 100%;"/>
		</button>
		<text class="text-center" >{{to=="zh"?"中文":"英文"}}</text>
	</view>
	
	<view class="center" style="display: flex; flex-direction: column;align-items: center; width: 100%">
		<textarea class="translate" rows="8" v-model="word"></textarea>
		<view style="height:90px;width: 100%; ">
			<button class="search" @tap="search" style="width: 300px; background-color:lightblue;color:black">翻译</button>
		</view>
		
		<textarea class="translate" rows="8" v-model="translateword"></textarea>
	</view>
			
</template>

<script>
	export default {
		data() {
			return {
				translateword:"",
				word:"",
				from:"en",
				to:"zh",
			}
		},
		onLoad(option) {
			this.word=option.word;
			this.search();
		},
		methods: {
			change(){
				if(this.from=="en"&&this.to=="zh"){
					this.from="zh"
					this.to="en"
				}
				else{
					this.from="en"
					this.to="zh"
				}
			},
			search(){
				if (this.word!=""){
					uni.request({
						url:"https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token=24.7c27b01cb6e0f099352f5c013130419c.2592000.1711468885.282335-53371806",
						method:"POST",
						data:{
							q:this.word,
							from:this.from,
							to:this.to,
						},
						header:{
							"content-type": "application/json;charset=utf-8",
						},
						success: (res) => {
							this.translateword = res.data.result.trans_result[0].dst;
						},
						fail: (err) => {
							console.log(err);
						}
					})
				}
				
			}
		}
	}
</script>

<style>
	page{
		background: radial-gradient(circle,  #bababc,#1d83ff);
	}
	
.translate{
	background-color: #dcecff;
	height: 220px;
	width: 300px;
}
.change{
	display: flex;
	height: 60px;
	width: 100%;
	align-items: center;
	justify-content: space-around;
}
.text-center{
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: aliceblue;
	width: 50px;
	height: 30px;
	color: #320eff;
}
</style>
